<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<!-- 准备好一个容器 -->
		<div id="test">

		</div>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom,用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 此处一定要写babel -->
		<script type="text/javascript">
			//1.创建虚拟DOM
			const VDOM = React.createElement(
				"h1", {
					id: "title"
				},
				"hello ly"
			); /* 此处一定不要写引号,因为不是字符串 */
			//2.渲染虚拟DOM到页面
			ReactDOM.render(VDOM, document.getElementById("test"));

			const TDOM = document.getElementById('test');
			console.log('真实DOM', TDOM);
			console.log('虚拟DOM', VDOM);
			debugger;
			// console.log(typeof VDOM);
			// console.log(VDOM instanceof Object);
			/*
				关于虚拟DOM
				1.本质是Object类型的对象（一般对象）
				2.虚拟DOM比较"轻量",因为虚拟DOM是React内部在使用， 无需真实DOM那么多的属性
				3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上
			*/
		</script>
	</body>
</html>
